<template>
  <div>
    <el-form label-width="100px">
      <el-form-item label="SPU名称">
        <el-input v-model="spuForm.spuName" placeholder="SPU名称" />
      </el-form-item>
      <el-form-item label="品牌">
        <el-select v-model="spuForm.tmId" placeholder="请选择">
          <el-option v-for="tm in trademarkList" :key="tm.id" :label="tm.tmName" :value="tm.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="SPU图片">
        <el-upload
          :file-list="spuImageList"
          :action="`${BASE_URL}/admin/product/upload`"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image">
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性">
        <el-select v-model="saleAttrIdAndName" :placeholder="`还有${unSelectSaleAttrList.length}个选择`">
          <el-option
            v-for="unSelectSaleAttr in unSelectSaleAttrList"
            :key="unSelectSaleAttr.id"
            :label="unSelectSaleAttr.name"
            :value="`${unSelectSaleAttr.id}:${unSelectSaleAttr.name}`"
          />
        </el-select>
        <el-button :disabled="!saleAttrIdAndName" type="primary" size="default" @click="addSaleAttr">添加销售属性</el-button>
        <el-table :data="spuSaleAttrList" border>
          <el-table-column type="index" align="center" label="序号" width="80" />
          <el-table-column lable="属性名" prop="saleAttrName" />
          <el-table-column lable="属性值名称列表">
            <template v-slot="{row,$index}">
              <el-tag
                v-for="(saleAttrValue,index) in row.spuSaleAttrValueList"
                :key="saleAttrValue.id"
                class="mx-1"
                closable
                :disable-transitions="false"
                @close="row.spuSaleAttrValueList.splice(index,1)"
              >{{ saleAttrValue.saleAttrValueName }}</el-tag>
              <el-input
                v-if="row.isEdit"
                ref="InputRef"
                v-model="row.saleAttrValueName"
                style="width:100px"
                class="m1-1 w-20"
                size="small"
                @keyup.enter="handleInputConfirm(row)"
                @blur="handleInputConfirm(row)"
              />
              <el-button v-else class="button-new-tag ml-1" size="small" @click="toEdit(row)">添加</el-button>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row,$index}">
              <el-button type="danger" icon="el-icon-delete" size="default" title="删除销售属性" @click="spuSaleAttrList.splice($index,1)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="!spuSaleAttrList.length" type="primary" size="default" @click="save">保存</el-button>
        <el-button size="default" @click="cancel">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'SpuForm',
  props: ['setShowState'],
  data() {
    return {

    }
  }
}
</script>

<style lang="less" scoped>

</style>
